<template>
  <div class="line-box">
    <a-timeline v-if="historyData.length > 0">
      <a-timeline-item v-for="(item, index) in historyData" :key="item.schemeId">
        <div class="line-head">
          <div>
            <span class="line-name">对方案进行优化，点击保存至草稿箱</span>
            <div class="line-time">{{item.schemeInfo.createDate}}</div>
          </div>
          <div class="time-reset-btn" @click="resetCase(item.schemeId)">
            <UndoOutlined />
            还原至垓方案
          </div>
        </div>
        <div class="line-body">
         <div class="line-chart-item">
           <TriGantt :indexId="index" :caseInfo="item"/>
         </div>
        </div>
      </a-timeline-item>
    </a-timeline>
    <EmptyDefault :style="{marginTop: '60px'}" v-else :descriptionInfo="'暂无数据'"/>
  </div>

</template>

<script setup>
import TriGantt from './TriGantt.vue'
import {UndoOutlined} from '@ant-design/icons-vue';
import {defineEmits, defineProps, getCurrentInstance, onMounted, ref, watch} from "vue";
import EmptyDefault from '@/components/EmptyDefault/EmptyDefault.vue'
import {message} from "ant-design-vue";
const { proxy  } = getCurrentInstance()
const historyData = ref([])
const emit = defineEmits(['updateData'])
const props = defineProps({
  planId: {
    type: String,
    default: ''
  }
})
const getList = () => {
  proxy.$api.getPlanHistory({createBy: localStorage.getItem('userName'),planId: props.planId}).then(res => {
    console.log('尝试排布', res)
    historyData.value = res.resultObject
    historyData.value.map(item => {
      Object.assign(item, {
        schemeId: item.schemeId.toString(),
        shipNames: item.shipNames.reverse()
      })
    })
  })
}
watch(() => historyData.value, (newVal) => {
  historyData.value = newVal
})
/**
 * 还原方案
 * */
const resetCase = (id) => {
  let obj = {
    schemeId: id,
    // createBy: localStorage.getItem('userName')
  }
  proxy.$api.getPlanHistoryReset(obj).then(res => {
    console.log('还原方案了', res)
    message.success('还原成功')
    emit('updateData', true)
  })
}
onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.line-box {
  background: #ffffff;
  border-radius: 2px;
  padding: 20px;
}
.time-line-head {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 20px;
  .head-txt {
    line-height: 30px;
  }
}
.line-head {
  display: flex;
  justify-content: space-between;
  width: 100%;
  .line-name {
    color: #2C3749;
    font-size: 20px;
  }
  .line-type {
    color: blueviolet;
  }
  .line-time {
    color: #6B7A8B;
    font-size: 16px;
    text-align: left;
  }
  .time-reset-btn {
    width: 140px;
    height: 40px;
    background: rgba(0,98,173,0.05);
    border-radius: 2px;
    line-height: 40px;
    color: #0062AD;
    cursor: pointer;
  }
}
.line-body {
  margin-top: 10px;
  // padding-right: 20px;
  display: flex;
  width: 100%;
  background: #fff;
  // border: 1px solid rgba(220,222,224, 0.15);
  justify-content: space-between;
  .line-chart-item {
    width:100%;
  }
  .line-radar-item {
   width: 400px;
  }
}
</style>
